<template>
    <div class="songInfo" @click="$router.go(-1)">
        <div class="songInfoBox">
            <div class="img">
                <img :src="detail.songs[0].al.picUrl" alt="">
            </div>
            <div class="text">
                <h6>{{detail.songs[0].name}}</h6>
                <p>{{detail.songs[0].ar[0].name}}</p>
            </div>
        </div>
        <div class="iconBox">
            <img src="../../../assets/images/右箭头.png" alt="">
        </div>
    </div>
</template>

<script>
export default {
    props:["comment","detail"]
}
</script>

<style lang="scss" scoped>
    @import "~@/assets/css/common.scss";
    .songInfo{
        margin-top: vw(58);
        padding: vw(6) vw(24);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: vw(20);
        border-bottom: vw(10) solid #f5f5f5;
        .songInfoBox{
            display: flex;
            justify-content: space-between;
            align-items: center;
            .img{
                width: vw(70);
                height: vw(70);
                font-size: 0;
                overflow: hidden;
                border-radius: vw(6);
                img{
                    width: 100%;
                }
            }
        }
        .text{
            margin-left: vw(20);
            h6{
                font-size: vw(16);
            }
            p{
                margin-top: vw(4);
                font-size: vw(14);
                color: #507daf;
            }
        }
    }
    .iconBox{
        width: vw(36);
        height: vw(36);
        font-size: 0;
        img{
            width: 100%;
        }
    }

</style>